<template>
  <div class="file-list-wrapper">
    <!-- 操作按钮 -->
    <el-header height="auto">
      <OperationMenu :fileType="fileType" :filePath="filePath"
        @getSearchFileList="getSearchFileList"
        @getTableDataByType="getTableDataByType"></OperationMenu>
    </el-header>
    <div class="middle-wrapper">
      <!-- 面包屑导航栏 -->
      <BreadCrumb class="breadcrumb" :fileType="fileType" :filePath="filePath"
        @getTableDataByType="getTableDataByType"></BreadCrumb>
    </div>
    <!-- 文件列表-表格模式 -->
    <FileTable :fileType="fileType" :filePath="filePath" :fileList="fileList"
      :loading.sync="loading" @getTableDataByType="getTableDataByType"
      @click.native.right="handleClickRight"></FileTable>


    <div class="pagination-wrapper">
      <div class="current-page-count">当前页{{ fileList.length }}条</div>
      <!-- 回收站不展示分页组件 -->
      <el-pagination :current-page="pageData.currentPage"
        :page-size="pageData.pageCount" :total="pageData.total"
        :page-sizes="[10, 50, 100, 200]" :layout="screenWidth <= 768
          ? 'total, prev, next, jumper'
          : 'sizes, total, prev, pager, next'
          " @current-change="handleCurrentChange"
        @size-change="handleSizeChange" v-if="fileType !== 6">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import OperationMenu from './components/OperationMenu.vue'
import BreadCrumb from '_c/common/BreadCrumb.vue'
import FileTable from '_c/common/FileTable.vue'


import {
  getFileListByPath,
  getFileListByType,
  searchFile
} from '_r/file.js'

export default {
  name: 'FileList',
  components: {
    OperationMenu,
    BreadCrumb,
    FileTable,

  },
  data() {
    return {
      fileNameSearch: '',
      loading: true, //  表格数据-loading
      fileList: [], //  表格数据-文件列表

      pageData: {
        currentPage: 1,
        pageCount: 50,
        total: 0
      }
    }
  },
  computed: {
    // 左侧菜单选中的文件类型
    fileType() {
      return this.$route.query.fileType ? Number(this.$route.query.fileType) : 0
    },
    // 当前所在路径
    filePath() {
      return this.$route.query.filePath ? this.$route.query.filePath : '/'
    },

    // 屏幕宽度
    screenWidth() {
      return this.$store.state.common.screenWidth
    }
  },
  watch: {
    filePath() {
      // 当左侧菜单选择“全部”或“我的分享”，文件路径发生变化时，再重新获取文件列表
      if (this.$route.name === 'File' && [0, 8].includes(this.fileType)) {
        this.setPageCount()
        this.getTableDataByType()
      }
    },
    fileType() {
      if (this.$route.name === 'File') {
        this.setPageCount()
        this.getTableDataByType()
      }
    },

  },
  created() {
    this.setPageCount()
    this.getTableDataByType()
  },
  methods: {
    /**
     * 文件展示区域的空白处右键事件
     * @param {Document} event 右键事件对象
     */
    handleClickRight(event) {
      event.preventDefault()
      // 只有在全部页面才可以进行以下操作
      if (![6, 8].includes(this.fileType)) {
        this.$openBox
          .contextMenu({
            selectedFile: undefined,
            domEvent: event,
            serviceEl: this
          })
          .then((res) => {
            if (res === 'confirm') {
              this.getTableDataByType() //  刷新文件列表

            }
          })
      }
    },
    /**
     * 表格数据获取相关事件 | 调整分页大小
     */
    setPageCount() {
      this.pageData.currentPage = 1

      this.pageData.pageCount = 50


    },
    /**
     * 表格数据获取相关事件 | 获取文件列表数据
     */
    getTableDataByType() {
      this.loading = true
      // 分类型
      if (Number(this.fileType)) {
        switch (Number(this.fileType)) {
          case 6: {
            this.showFileRecovery() //  回收站
            break
          }
          default: {
            this.showFileList()
            break
          }
        }
      } else {
        // 全部文件
        this.showFileList()
      }
      this.$store.dispatch('showStorage')
    },
    /**
     * 表格数据获取相关事件 | 获取当前路径下的文件列表
     */
    showFileList() {
      let data = {
        fileType: this.fileType,
        filePath: this.filePath,
        currentPage: this.pageData.currentPage,
        pageCount: this.pageData.pageCount,
        tel: 111
      }

      this.loading = false
      getFileListByPath(data).then((res) => {
        if (res.success) {
          this.fileList = res.dataList
          this.pageData.total = Number(res.total)
          this.loading = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * 表格数据获取相关事件 | 分页组件 | 当前页码改变
     */
    handleCurrentChange(currentPage) {
      this.pageData.currentPage = currentPage
      this.getTableDataByType()
    },
    /**
     * 表格数据获取相关事件 | 分页组件 | 页大小改变时
     */
    handleSizeChange(pageCount) {
      this.pageData.pageCount = pageCount
      this.getTableDataByType()
    },

    /**
     * 表格数据获取相关事件 | 获取我的分享列表
     */
    /**
     * 表格数据获取相关事件 | 根据文件类型展示文件列表
     */
    showFileListByType() {
      //  分类型
      let data = {
        fileType: this.fileType,
        currentPage: this.pageData.currentPage,
        pageCount: this.pageData.pageCount
      }
      getFileListByType(data).then((res) => {
        if (res.success) {
          this.fileList = res.dataList
          this.pageData.total = Number(res.total)
          this.loading = false
        } else {
          this.$message.error(res.message)
        }
      })
    },

    /**
     * 获取搜索文件结果列表
     */
    getSearchFileList(fileName) {
      this.loading = true
      searchFile({
        currentPage: this.pageData.currentPage,
        pageCount: this.pageData.pageCount,
        fileName: fileName
      }).then((res) => {
        this.loading = false
        if (res.success) {
          this.fileList = res.dataList
          this.pageData.total = res.data.totalHits
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.file-list-wrapper {
  >>> .el-header {
    padding: 0;
  }

  .middle-wrapper {
    margin-bottom: 8px;
  }

  .pagination-wrapper {
    position: relative;
    border-top: 1px solid $BorderBase;
    height: 44px;
    line-height: 44px;
    text-align: center;

    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: $RegularText;
    }
  }
}
</style>
